<template>
    <div>
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="图表标题">
                <el-input v-model="propJson.title" style="width: 100%" placeholder="图标标题"/>
            </el-form-item>

            <el-form-item label="标题字体大小">
                <el-input-number v-model="propJson.titleFontSize" :min="1"/>
            </el-form-item>

            <el-form-item label="图表高度">
                <el-input-number v-model="propJson.containerHeight" :min="1"/>
            </el-form-item>

            <el-form-item label="是否自适应图表宽度">
                <el-radio-group v-model="propJson.isContainerAutoWidth">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="图表宽度" v-if="!propJson.isContainerAutoWidth">
                <el-input-number v-model="propJson.containerWidth" :min="1"/>
            </el-form-item>

            <el-form-item label="是否使用平滑曲线">
                <el-radio-group v-model="propJson.isSmooth">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider>图标数据来源</el-divider>

            <CommonThirdServiceValue :actionInfo="propJson.chartDataValue ? propJson.chartDataValue : {}" :commonParam="commonParam" />

            <el-divider></el-divider>

            <el-form-item label="是否多数据展示">
                <el-radio-group v-model="propJson.isAddLegend">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider v-if="propJson.isAddLegend">多数据图例名称</el-divider>

            <CommonThirdServiceValue v-if="propJson.isAddLegend" :actionInfo="propJson.legendData ? propJson.legendData : {}" :commonParam="commonParam" />

            <el-divider v-if="propJson.isAddLegend"></el-divider>
            <el-form-item label="是否为面积图">
                <el-radio-group v-model="propJson.isAddAreaStyle">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否添加鼠标悬浮提示">
                <el-radio-group v-model="propJson.isAddToolTip">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="提示触发类型" v-if="propJson.isAddToolTip">
                <el-select v-model="propJson.tooltipTrigger" clearable placeholder="提示触发类型" style="width: 100%">
                    <el-option value="item" label="数据项图形触发"></el-option>
                    <el-option value="axis" label="坐标轴触发"></el-option>
                    <el-option value="none" label="什么都不触发"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="指示器类型" v-if="propJson.isAddToolTip">
                <el-select v-model="propJson.tooltipAxisPointerType" clearable placeholder="指示器类型" style="width: 100%">
                    <el-option value="line" label="直线指示"></el-option>
                    <el-option value="shadow" label="阴影指示"></el-option>
                    <el-option value="none" label="无指示"></el-option>
                    <el-option value="cross" label="十字准星指示"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="是否添加选中高亮" v-if="propJson.isAddToolTip && propJson.isAddAreaStyle">
                <el-radio-group v-model="propJson.isAddAreaLight">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="高亮聚焦类型" v-if="propJson.isAddToolTip && propJson.isAddAreaStyle && propJson.isAddAreaLight">
                <el-select v-model="propJson.areaLightType" clearable placeholder="高亮聚焦类型" style="width: 100%">
                    <el-option value="none" label="不淡出"></el-option>
                    <el-option value="self" label="半淡出"></el-option>
                    <el-option value="series" label="全淡出"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="是否启用保存图片">
                <el-radio-group v-model="propJson.isAddSaveImageTool">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="图片保存类型" v-if="propJson.isAddSaveImageTool">
                <el-select v-model="propJson.saveImageType" clearable placeholder="图片保存类型" style="width: 100%">
                    <el-option value="png" label="PNG图片"></el-option>
                    <el-option value="jpg" label="JPG图片"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="图片保存名称" v-if="propJson.isAddSaveImageTool">
                <el-input v-model="propJson.saveImageName" style="width: 100%" placeholder="图片保存名称"/>
            </el-form-item>

            <el-form-item label="是否启用缩放功能">
                <el-radio-group v-model="propJson.isAddDataZoom">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="x坐标轴类型">
                <el-select v-model="propJson.xAxisType" clearable placeholder="x坐标轴类型" style="width: 100%">
                    <el-option value="value" label="数值轴"></el-option>
                    <el-option value="category" label="类目轴"></el-option>
                    <el-option value="time" label="时间轴"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="x坐标轴名称">
                <el-input v-model="propJson.xAxisName" style="width: 100%" placeholder="x坐标轴名称"/>
            </el-form-item>

            <el-form-item label="x坐标轴信息" v-if="propJson.xAxisType === 'category'">
                <el-input v-model="propJson.xAxisData" style="width: 100%" placeholder="x坐标轴信息"/>
            </el-form-item>

            <el-form-item label="是否添加x轴留白">
                <el-radio-group v-model="propJson.xAxisIsBoundaryGap">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="左右留白" v-if="propJson.xAxisIsBoundaryGap && propJson.xAxisType === 'category'">
                <el-radio-group v-model="propJson.xAxisCategoryBoundaryGap">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="左右留白" v-if="propJson.xAxisIsBoundaryGap && propJson.xAxisType !== 'category'">
                <el-input-number v-model="propJson.xAxisBoundaryGapLeft" :min="0" :max="99"/> <span>&nbsp;&nbsp;%&nbsp;&nbsp;&nbsp;----&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <el-input-number v-model="propJson.xAxisBoundaryGapRight" :min="0" :max="99"/> <span>&nbsp;&nbsp;% </span>
            </el-form-item>

            <el-form-item label="y坐标轴类型">
                <el-select v-model="propJson.yAxisType" clearable placeholder="y坐标轴类型" style="width: 100%">
                    <el-option value="value" label="数值轴"></el-option>
                    <el-option value="category" label="类目轴"></el-option>
                    <el-option value="time" label="时间轴"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="y坐标轴名称">
                <el-input v-model="propJson.yAxisName" style="width: 100%" placeholder="y坐标轴名称"/>
            </el-form-item>

            <el-form-item label="是否添加y轴单位">
                <el-radio-group v-model="propJson.yAxisIsAddUnit">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="y坐标轴单位内容" v-if="propJson.yAxisIsAddUnit">
                <el-input v-model="propJson.yAxisUnitInfo" style="width: 100%" placeholder="y坐标轴单位内容"/>
            </el-form-item>

            <el-form-item label="是否添加y轴留白">
                <el-radio-group v-model="propJson.yAxisIsBoundaryGap">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="左右留白" v-if="propJson.yAxisIsBoundaryGap && propJson.yAxisType === 'category'">
                <el-radio-group v-model="propJson.yAxisCategoryBoundaryGap">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="左右留白" v-if="propJson.yAxisIsBoundaryGap && propJson.yAxisType !== 'category'">
                <el-input-number v-model="propJson.yAxisBoundaryGapBottom" :min="0" :max="99"/> <span>&nbsp;&nbsp;%&nbsp;&nbsp;&nbsp;----&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <el-input-number v-model="propJson.yAxisBoundaryGapTop" :min="0" :max="99"/> <span>&nbsp;&nbsp;% </span>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue"

export default {
    name: "LineChartComponentDrawer",
    props: ['commonParam'],
    components: {
        CommonThirdServiceValue
    },
    computed: {
        propJson() {
            return this.$store.state.lowCodeDrawerJsonInfo;
        }
    },
}
</script>

<style scoped lang="less">

</style>